<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_样式类名的操作</title>
		
		<!-- 样式类名的操作 ：针对css3，添加，移除，切换的类名操作
		  addClass()          有参：1个参和多个参
		                      语法：addClass("类名")【1个参】
							  <p class="类名">
							  语法：addClass("类名")【多个参】
							  <p class="类名1 类名2">
							  功能：匹配元素集合中的所有元素，添加一个或者多个类名操作
							  理解：元素添加存在的样式
		  removeClass()       功能：匹配元素集合中的所有元素，移除一个或者多个类名操作
		  toggleClass()       功能：如果元素有类名则移除，没有则添加
		  hasClass()          功能：检查匹配元素集合中是否包含指定类名
		                           返回值bool
		-->
		<!-- 要求：1.jq引入
		          2.html     div id="targetElement"
				             4个按钮    id="addClassBtn"
							           id="removeClassBtn"
							           id="toggleClassBtn"
							           id="hasClassBtn"
							   div  id="resultArea"		
				  3.css:  .bgColor{ 300*300  背景色}			
						  .broders{10个像素 实线红色边框  倒角画圆}
		 -->
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			.bgColor{
				height: 200px;
				width: 200px;
				background: #aaffff;
			}
			.broders{
				border: 10px solid #ffff7f;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<div id="targetElement"></div>
		<button id="addClassBtn">添加类名</button>
		<button id="removeClassBtn">移除类名</button>
		<button id="toggleClassBtn">切换类名</button>
		<button id="hasClassBtn">检查类名是否存在</button>
		<div id="resultArea"></div>
		<script>
			//1.点击添加类名按钮，添加效果【样式】  300*300 背景色红色
			$("#addClassBtn").click(function(){
				$("#targetElement").addClass("bgColor broders");
				$("#resultArea").html("<h4>添加样式类名：bgColor</h4>");
			});
			//2.点击 添加类名 按钮 添加效果【样式】300*300 背景色红色  圆 外层 10px 黄色框
			//3.点击 移除类名 按钮 添加效果【样式】300*300 背景色红色  
			$("#removeClassBtn").click(function(){
				$("#targetElement").removeClass("broders");
				$("#resultArea").html("<h4>添加样式类名：bgColor</h4>");
			});
			//4.点击 切换按钮  添加效果【样式】300*300 背景色红色  圆 外层 10px 黄色框
			//5.点击 切换按钮  添加效果【样式】 去掉 300*300 背景色红色
			$("#toggleClassBtn").click(function(){
				$("#targetElement").toggleClass("broders");
				$("#resultArea").html("<h4>添加样式类名：broders</h4>");
			});
			//6.检查类名是否存在  true 存在      false 不存在
			$("#hasClassBtn").click(function(){
				var hc=$("#targetElement").hasClass("broders");
				$("#resultArea").text("检查类名是否存在"+hc);
			});
		</script>
	</body>
</html>